<template>
    <view>
        <view class="con">

           <view v-if="isbtn == -1" class="searbox" @click="openSearchUserWin()">
                <view class="text1">球局场地</view>
                <view class="input_box">
                    <input type="text" v-model="RecommendName" placeholder-class="placerec" disabled placeholder="请选择场地">
                </view>
                <image v-if="isbtn != 1" class="rimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image>
            </view>
			<view v-else class="searbox">
                <view class="text1">球局场地</view>
                <view class="input_box">
                    <input type="text" v-model="RecommendName" placeholder-class="placerec" disabled placeholder="请选择场地">
                </view>
                <!-- <image v-if="isbtn != 1" class="rimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image> -->
            </view> 
        </view>
        <view class="con" v-if="isbtn != -1">
           <view class="searbox">
                <view class="text1">开球时间</view>
                <view class="input_box">
                    <input type="text" :value="Strokeslist.StartTime?$util.unixDatetime(Strokeslist.StartTime,'yy-ss'):''" placeholder-class="placerec" disabled>
                </view>
                <!-- <image class="rimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png" mode="widthFix"></image> -->
            </view> 
        </view>
        <view  class="Strokesbox" v-if="isbtn == 0 || isbtn == 1">
            <view class="Strokestitle">
				<view  class="text1">洞号</view>
                <view style="" class="text1">标准杆</view>
                <view style="" class="text1">成绩</view>
            </view>
            <view class="holeb">
                <view class="Holebox" v-for="(item) in list" :key="item.ID">
                    <view class="Holenum">
						<text class="HoleNO">{{item.HoleNO}}</text>
						<text class="golfname">{{getGolfname(item)}}</text>
					</view>
                    <view class="standard">{{item.Hit_Num}}</view>
                    <!-- <view class="actual">2</view> -->
                    <input v-if="Strokeslist.Status != 2" class="actual" type="number" v-model="item.Score" placeholder="请输入" placeholder-class="act" @blur="holescor(item)" :class="{'blacktext':item.Score>item.Hit_Num,'redtext':item.Score<item.Hit_Num}" maxlength="2">  
					<input v-else class="actual" type="number" v-model="item.Score"  placeholder-class="act" disabled :class="{'blacktext':item.Score>item.Hit_Num,'redtext':item.Score<item.Hit_Num}" maxlength="2"> 
                </view>
            </view>
			<view class="sum">{{sumscore? sumscore:''}}</view>
        </view>
        <view class="bottombox" >
            <view class="btnbox">
				<!-- <view @click="subJoin" class="fullBtn blackBtn" v-if="Strokeslist.Status == 1">
                    {{'结束记分'}}
                </view> -->
				<block v-if="isbtn == -1">
					<view @click="startball" class="fullBtn blackBtn">
						{{'开始打球'}}
					</view>
				</block>
				
				<block v-if="isbtn == 0 ||isbtn == 1">
					<view class="title2">提示：点击结束记分后统计总杆</view>
					<view v-if="Strokeslist.Status == 2" @click="savePageimg"  class="fullBtn blackBtn">
						{{'生成成绩单'}}
					</view>
					<view v-else @click="endball"  class="fullBtn blackBtn">
						{{'结束记分'}}
					</view>
					<!-- <view @click="subJoin" class="fullBtn blackBtn">
						{{ isbtn == 1?'确认修改':'立即保存'}}
					</view> -->
				</block>
                
            </view>
        </view>
        
		<!-- <canvas canvas-id="myCanvas" class="myscore"><canvas/> -->
		<!-- <view class="warp" v-if="false">
			<canvas canvas-id="hoCanvas" class="canvas" :style="{ height: lineBgHeight + 'px' }"></canvas>
			<button v-if="btnshow" @click="saveImageToAlbum">保存到相册</button>
		</view> -->


        <uni-popup ref="search_user" type="bottom">
			<view class="popupbox">
				<view class="title">
					搜索场地
				</view>
				<view class="sear">
					<input type="text" v-model="searVal" placeholder="请填写场地名称" @confirm="searchUser" />
					<view class="icon" @click="searchUser">
						<image src="@/static/img/search.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll" scroll-y>
					<view v-if="Array.isArray(userArr) && userArr.length > 0">
						<view class="item" v-for="item in userArr" :key="item.ID" @click="selectUser(item)">
							<view class="name">
								{{$util.entitiesToUtf16(item.ShopName) || "匿名"}}
							</view>
						</view>
					</view>
					<view class="item" v-else
						style="height: 100%;display: flex;align-items: center;justify-content: center;">
						暂无场地
					</view>
				</scroll-view>
			</view>
		</uni-popup>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
	startTime:'',
	ID:'',
	score:'',
	crid:'',
	isbtn:-1, // 按钮转换
    showTime:false,
    PID:'',
    RecommendName:'',
    userArr:[],
    searVal:'',
    actual:'',
    minDate:new Date().getTime(),
    reqData:{
        ServerDate:'',
        ServerTime:'',
    },
    Strokeslist:[],
	list:[],

	ratio: '',
	img_w:'',
	img_h:'',
};
},
onReady() {
		// 微信小程序需要用此写法
		// this.$refs.datetimePicker.setFormatter(this.formatter);
		
	},
computed:{
    dateTime() {
			if (!this.reqData.ServerDate) {
				return '';
			} else {
				return this.reqData.ServerDate + ' ' + this.reqData.ServerTime;
			}
		},
	sumscore(){
		let num = 0
		for (let i = 0; i < this.list.length; i++) {
			num += Number(this.list[i].Score)
		}
		return num
	},
},
onLoad(e){
	this.ID = e.id
	if(this.ID){
		this.isbtn = 1
		this.getRound()
	}
	this.searchUser()
},
methods: {
	getGolfname(item){
		if (item.Score == 0) {
			return ''
		}
		if(item.Score ==1){
			return '(一杆进洞)'
		}else{
			switch (item.Score - item.Hit_Num) {
				case -2:
					return '(老鹰)'
				case -1:
					return '(小鸟)'
				case 0:
					return '(par)'
				default:
					return ''
			}
		}
	},
	async savePageimg(){
		let id = this.isbtn == 1? this.ID:this.crid
		this.nav_to('/pages/court/transcript?id='+id)
	},

	async getRound(){
		let id = this.isbtn == 1? this.ID:this.crid
		let res = await this.$api.post('GolfHole/RoundDetail',{
                ID:id
            })
			if(res.code == 0){
				this.Strokeslist = res.data
				this.list = res.data.Items
				this.RecommendName = res.data.ShopName
				this.$util.unixDatetime(this.Strokeslist.StartTime,'yy-ss')
				for (let i = 0; i < this.list.length; i++) {
						if(this.list[i].Score == 0){
							this.list[i].Score = ''
						}
						// this.getGolfname(this.list[i])
				}
				
			}
	},
	//结束球局
	async endball(){
		// for(let i =0;i<this.list.length;i++){
		// 	if(!this.list[i].Score){
		// 		this.$pv.msg('请填写数据');
		// 		return false;
		// 	}
		// }
		let id = this.isbtn == 1? this.ID:this.crid
		// console.log(id);
		let _this = this
		uni.showModal({
			title: '温馨提示',
			content: '您确认要结束吗?',
			showCancel: true,
			success: async function (res) {
				if (res.confirm) {
					_this.$pv.load();
					let res = await _this.$api.post('GolfHole/FinishRound',{
						ID:id
					})
					if(res.code == 0){
						_this.$pv.msg('已结束');
						_this.getRound()
					}
					
				}
			}
		});

	},
	//批量保存
	async subJoin(){
		// for(let i =0;i<this.list.length;i++){
		// 	if(!this.list[i].Score){
		// 		this.$pv.msg('请填写完数据');
		// 		return false;
		// 	}
		// }
		let listJson = JSON.stringify(this.list)

		let res = await this.$api.post('GolfHole/BatchScoring',{
			JSON_Data:listJson
		})
		if(res.code == 0){
			this.$pv.msg('保存成功');
			// uni.navigateBack()
		}
	},
	//记分
	async holescor(item){
		if(!Number(item.Score)){
			item.Score = ''
			this.$pv.msg('请输入正确的数字');
			return false;
		}
		if(item.Score <0){
			item.Score = ''
			this.$pv.msg('成绩必须大于0');
			return false;
		}
		// this.$set(this.list, index, listData)
		// let score = item.Score
		// this.sumscore += item.Score
		let res = await this.$api.post('GolfHole/Scoring',{
			RoundID:item.RoundID,
			Score:item.Score,
			HoleNO:item.HoleNO,
			ID:item.ID
		})
		if(res.code == 0){
			this.getGolfname(item)

		}
		
	},
	async startball(){
		if(!this.RecommendName){
			this.$pv.msg('请选择场地');
			return false;
		}
		this.isbtn = 0;
		let res = await this.$api.post('GolfHole/StartRound',{
			ID:this.crid,
			ShopID:this.PID
		})
		if(res.code == 0){
			// this.isbtn = 0
			
			let res = await this.$api.post('GolfHole/RoundDetail',{
                ID:this.crid
            })
            if(res.code == 0){
                this.Strokeslist = res.data
				this.list = res.data.Items
				this.$util.unixDatetime(this.Strokeslist.StartTime,'yy-ss')
				for (let i = 0; i < this.list.length; i++) {
						if(this.list[i].Score == 0){
							this.list[i].Score = ''
						}
					
				}
				// console.log(this.Strokeslist);
            }
		}
	},
    openSearchUserWin() {
		if(this.isbtn  != 1){
			this.$refs.search_user.open()
		}
		
	},
    async searchUser() {
		let user_res = await this.$api.post('Shops/Search', {
            ShopType:'高尔夫球场',
			ShopName: this.searVal
		});
        if(user_res.code == 0){
            this.userArr = user_res.data;
            
        }
	},
    async selectUser(item) {
		this.PID = item.ID;
		this.RecommendName = this.$util.entitiesToUtf16(item.ShopName);
		let res1 = await this.$api.post('GolfHole/Create',{
			ShopID:item.ID
		})
		if(res1.code ==0){
			this.crid = res1.data
		}
		this.$refs.search_user.close()
	},
    timeFilter(mode, options) {
			let d = new Date()
			if (mode === 'hour') {
				let mi = d.getMinutes()
				if (mi > 30) options.splice(0, 1)
				return options
			}
			if (mode === 'minute') {
				return ['00', '30']
			}
			return options;
		},
    setTime(e) {
			let em = uni.$u.timeFormat(e, 'hh:MM');
			let n = ''
			let b = ''
			n = uni.$u.timeFormat(e, 'yyyy-mm-dd');
			b = uni.$u.timeFormat(e, 'hh:MM');
			this.reqData.ServerDate = n;
			this.reqData.ServerTime = b;

			// this.showTime = false;
		},
        formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			if (type === 'hour') {
				return `${value}时`;
			}
			if (type === 'minute') {
				return `${value}分  `;
			}
			return value;
		}
},

}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}

.title2{
    color: #999999;
    font-size: 26rpx;
    // margin-top: 10rpx;
	text-align: center;
}
.bottombox {
	width: 100%;
	height: 205rpx;
	position: relative;
	margin-top: 20rpx;
}
.btnbox {
	width: 100%;
	// min-height: 132rpx;
	height: 205rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	padding: 25rpx;
	box-shadow: 0 0 4rpx #ccc;
	box-sizing: border-box;
	// display: flex;
	align-items: center;
	z-index: 2;
}
.blackBtn {
    
	background: #706EEE;
	color: #ffffff;
}
.fullBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: blod;
		width: 100%;
		height: 92rpx;
		margin: 20rpx auto;
		border-radius: 50rpx;
		margin-right: 15rpx;
	}
.placerec{
    font-size: 32rpx;
    color: #999999;
}
.act{

	font-size: 32rpx;
    color: #999999;
	// border-bottom: 1rpx solid #706EEE;
}
.Strokesbox{
    width: 96%;
    min-height: 200rpx;
    margin: 0 auto;
    margin-top: 20rpx;
	padding: 20rpx 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-sizing: border-box;
    .Strokestitle{
		height: 88rpx;
        // margin-left: 228rpx;
		border: 1rpx solid #706EEE;
		background-color: #F0F0FF;
		display: flex;
		align-items: center;
		text-align: center;
        .text1{
            font-size: 32rpx;
            font-weight: bold;
			border-right: 1rpx solid #706EEE;
			// width: 228rpx;
			// width: calc(100%/3);
			    flex: 1;
			height: 100%;
    		line-height: 88rpx;
            /* width: 153rpx; */
            // margin-right: 5%;
        }
    }
	.Strokestitle view:last-child{
		border-right: 0;
	}
	.holeb{
		// padding: 0 32rpx;
    	// box-sizing: border-box;
	}
	.sum{
			text-align: end;
			margin-right: 100rpx;
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
	.holeb view:last-child{
		border-bottom: 1rpx solid #706EEE;
	}
    .Holebox{
        box-sizing: border-box;
		display: flex;
		align-items: center;
		// border: 1rpx solid #706EEE;
		border-bottom: 1rpx solid #706EEE;
    	border-left: 1rpx solid #706EEE;
		// border-bottom: 0;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
        .Holenum{
            
			border-right: 1rpx solid #706EEE;
			// width: calc(100%/3);
			flex: 1;
			height: 100%;
			.HoleNO{
				font-size: 32rpx;
			}
			.golfname{
				font-size: 26rpx;
				color: #706EEE;
			}
        }
        .standard{
           	width: calc(100%/3);
			text-align: center;
			border-right: 1rpx solid #706EEE;
			height: 100%;
			font-size: 32rpx;
        }
        .actual{
			width: calc(100%/3);
			text-align: center;
			font-size: 32rpx;
			color: #706EEE;
			caret-color: #706EEE;
			height: 100%;
			border-right: 1rpx solid #706EEE;
			padding: 20rpx;
    		box-sizing: border-box;
        }
		.blacktext{
			color: #333333;
		}
		.redtext{
			color: red;
		}
    }
}
.con {
	width: 96%;
    margin: 0 auto;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 32rpx 30rpx 32rpx;
    background-color: #fff;
	.searbox{
		display: flex;
		// border-bottom: 1rpx solid #999999;
		align-items: center;
		.input_box{
			flex: 1;
			text-align: right;
		}
        .text1 {
            font-size: 32rpx;
            color: #333333;
            margin-right: 20rpx;
		}
        .rimg {
            width: 32rpx;
            height: 44rpx;
            margin-left: auto;
        }
	}
}
.popupbox {
	background-color: #fff;
	border-top-left-radius: 26rpx;
	border-top-right-radius: 26rpx;
	padding: 20rpx 32rpx;
	padding-bottom: 125rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
		color: #6f6f6f;
	}
	.sear {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 8rpx #ccc;
		.icon {
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			image {
				width: 34rpx;
				height: 34rpx;
			}
		}
		input {
			color: #6f6f6f;
			padding: 10rpx 10rpx 10rpx 20rpx;
			flex: 1;
		}
	}
	.scroll {
		width: 100%;
		height: 30vh;
		box-sizing: border-box;
		.item {
			display: flex;
			padding: 20rpx 0;
			height: 100rpx;
			border-bottom: 2rpx solid #eee;
			.cover {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 1px solid #333;
				image {
					height: 100%;
					width: 100%;
				}
			}
			.name {
				color: #6f6f6f;
				line-height: 52px;
				height: 52rpx;
				padding: 0rpx 0 0 20rpx;
				.member {
					display: inline-block;
					width: 68rpx;
					height: 32rpx;
					background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
					border-radius: 2px;
					border: 2px solid #D6C6AB;
					text-align: center;
					color: #fff;
					font-size: 16rpx;
					line-height: 32rpx;
					margin-left: 20rpx;
				}
				.number_huan {
					color: #4C310C;
					background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
					border: 2rpx solid #E6CEB5;
				}
			}

		}
		.item:last-child {
			border: 0;
		}
		.item:first-child {
			padding-top: 0;
		}
	}
}
</style>